﻿@using RuoVea.ExDto
@using RuoVea.OmiDict
@using RuoVea.OmiDict.Language
@using RuoVea.OmiDict.Attributes
@using RuoVea.OmiDict.Options
@{
    Layout = "";
    AppConfig config = ConfigManages.Config ?? new AppConfig();
}
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@Html.Raw(i18n.dictionary_value)</title>
    <link href="~/ruoveaui/xg6rvft8p/avue/index.css" rel="stylesheet" />
    <link href="~/ruoveaui/xg6rvft8p/elementui/index.min.css" rel="stylesheet" />
    <style>.el-button [class*="el-icon-"] + span { margin-left: 1px !important; } </style>
</head>
<body>
    <div id="app" v-cloak>
        <avue-crud :data="tableData" :option="option" :page.sync="pageOption" :table-loading="loading"
                   v-on:refresh-change="refreshChange"
                   v-on:row-save="handleRowSave"
                   v-on:row-update="handleRowUpdate"
                   v-on:row-del="handleRowDel"
                   v-on:search-change="searchChange"
                   v-on:search-reset="resetChange"
                   :cell-style="cellStyle"
                   v-model="currentForm" @@submit.native.prevent
                   v-on:on-load="onLoad">
                <template slot="record" slot-scope="scope">
                    <modify-record :data="scope.row"></modify-record>
                </template>
        </avue-crud>
    </div>
    <script src="~/ruoveaui/xg6rvft8p/vue/vue.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/index.i18n.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/index.lang.js"></script>
    <script>
        Vue.prototype.i18n.messages.zhCN = { ...Vue.prototype.i18n.messages.zhCN, ...{ "text": "文本", "badge": "徽章", "tag": "标签", "button": "按钮", "status": "状态", "progress": "进度条", "image": "图片", "json": "JSON数据", "html": "HTML内容", "date": "日期", "color": "颜色", "url": "链接", "code": "代码", "boolean": "布尔值", "validation_error": "验证过程中发生错误", "ext_data_required": "此标签类型需要填写扩展数据", "progress_validation": "进度值必须是0-100的整数", "color_validation": "颜色格式不正确（支持：#RGB、#RRGGBB、rgb()、颜色名称）", "boolean_validation": "请输入true/false或1/0", "date_validation": "日期格式不正确（支持：时间戳或日期字符串）", "json_validation": "必须是有效的JSON格式", "image_url_validation": "请输入有效的图片URL", "link_url_validation": "请输入有效的链接地址", "format_error": "格式错误", "category": "所属分类", "property_value": "属性值", "dictionary_value": "字典值", "is_default": "是否默认", "Display Text": "显示文本", "Tag Type": "标签类型", "Style (Style)": "样式(Style)", "Style (Class)": "样式(Class)", "Extended Data": "拓展数据" } };
        Vue.prototype.i18n.messages.en = { ...Vue.prototype.i18n.messages.en, ...{ "text": "Text", "badge": "Badge", "tag": "Tag", "button": "Button", "status": "Status", "progress": "Progress", "image": "Image", "json": "JSON Data", "html": "HTML Content", "date": "Date", "color": "Color", "url": "URL", "code": "Code", "boolean": "Boolean", "validation_error": "Error occurred during validation", "ext_data_required": "Extended data is required for this tag type", "progress_validation": "Progress value must be an integer between 0-100", "color_validation": "Invalid color format (supported: #RGB, #RRGGBB, rgb(), color names)", "boolean_validation": "Please enter true/false or 1/0", "date_validation": "Invalid date format (supported: timestamp or date string)", "json_validation": "Must be valid JSON format", "image_url_validation": "Please enter a valid image URL", "link_url_validation": "Please enter a valid link URL", "format_error": "Format error", "category": "Belongs to Category", "property_value": "Property Value", "dictionary_value": "Dictionary Value", "is_default": "Is Default", "Display Text": "Display Text", "Tag Type": "Tag Type", "Style (Style)": "Style (Style)", "Style (Class)": "Style (Class)", "Extended Data": "Extended Data" } };
        Vue.prototype.i18n.messages.fr = { ...Vue.prototype.i18n.messages.fr, ...{ "text": "Texte", "badge": "Badge", "tag": "Étiquette", "button": "Bouton", "status": "Statut", "progress": "Barre de progression", "image": "Image", "json": "Données JSON", "html": "Contenu HTML", "date": "Date", "color": "Couleur", "url": "Lien", "code": "Code", "boolean": "Booléen", "validation_error": "Erreur lors de la validation", "ext_data_required": "Les données étendues sont requises pour ce type d'étiquette", "progress_validation": "La valeur de progression doit être un entier entre 0 et 100", "color_validation": "Format de couleur invalide (supporté: #RGB, #RRGGBB, rgb(), noms de couleur)", "boolean_validation": "Veuillez entrer vrai/faux ou 1/0", "date_validation": "Format de date invalide (supporté: horodatage ou chaîne de date)", "json_validation": "Doit être un format JSON valide", "image_url_validation": "Veuillez entrer une URL d'image valide", "link_url_validation": "Veuillez entrer une URL de lien valide", "format_error": "Erreur de format", "category": "Catégorie associée", "property_value": "Valeur de propriété", "dictionary_value": "Valeur de dictionnaire", "is_default": "Par défaut", "Display Text": "Texte affiché", "Tag Type": "Type de balise", "Style (Style)": "Style (Style)", "Style (Class)": "Style (Class)", "Extended Data": "Données étendues" } };
        Vue.prototype.i18n.messages.ja = { ...Vue.prototype.i18n.messages.ja, ...{ "text": "テキスト", "badge": "バッジ", "tag": "タグ", "button": "ボタン", "status": "状態", "progress": "進捗バー", "image": "画像", "json": "JSONデータ", "html": "HTMLコンテンツ", "date": "日付", "color": "色", "url": "リンク", "code": "コード", "boolean": "ブール値", "validation_error": "検証中にエラーが発生しました", "ext_data_required": "このタグタイプには拡張データの入力が必要です", "progress_validation": "進捗値は0〜100の整数でなければなりません", "color_validation": "無効な色形式（対応: #RGB、#RRGGBB、rgb()、色名）", "boolean_validation": "true/falseまたは1/0を入力してください", "date_validation": "無効な日付形式（対応: タイムスタンプまたは日付文字列）", "json_validation": "有効なJSON形式である必要があります", "image_url_validation": "有効な画像URLを入力してください", "link_url_validation": "有効なリンクURLを入力してください", "format_error": "形式エラー", "category": "所属カテゴリ", "property_value": "プロパティ値", "dictionary_value": "辞書値", "is_default": "デフォルトかどうか", "Display Text": "表示テキスト", "Tag Type": "タグの種類", "Style (Style)": "スタイル（Style）", "Style (Class)": "スタイル（Class）", "Extended Data": "拡張データ" } };
        Vue.prototype.i18n.messages.vi = { ...Vue.prototype.i18n.messages.vi, ...{ "text": "Văn bản", "badge": "Huy hiệu", "tag": "Thẻ", "button": "Nút", "status": "Trạng thái", "progress": "Thanh tiến trình", "image": "Hình ảnh", "json": "Dữ liệu JSON", "html": "Nội dung HTML", "date": "Ngày tháng", "color": "Màu sắc", "url": "Liên kết", "code": "Mã", "boolean": "Giá trị Boolean", "validation_error": "Lỗi xảy ra trong quá trình xác thực", "ext_data_required": "Cần có dữ liệu mở rộng cho loại thẻ này", "progress_validation": "Giá trị tiến trình phải là số nguyên từ 0-100", "color_validation": "Định dạng màu không hợp lệ (hỗ trợ: #RGB, #RRGGBB, rgb(), tên màu)", "boolean_validation": "Vui lòng nhập true/false hoặc 1/0", "date_validation": "Định dạng ngày không hợp lệ (hỗ trợ: dấu thời gian hoặc chuỗi ngày)", "json_validation": "Phải là định dạng JSON hợp lệ", "image_url_validation": "Vui lòng nhập URL hình ảnh hợp lệ", "link_url_validation": "Vui lòng nhập URL liên kết hợp lệ", "format_error": "Lỗi định dạng", "category": "Phân loại thuộc về", "property_value": "Giá trị thuộc tính", "dictionary_value": "Giá trị từ điển", "is_default": "Có phải mặc định không", "Display Text": "Văn bản hiển thị", "Tag Type": "Loại thẻ", "Style (Style)": "Kiểu (Style)", "Style (Class)": "Kiểu (Class)", "Extended Data": "Dữ liệu mở rộng" } };
        Vue.prototype.i18n.messages.zhTW = { ...Vue.prototype.i18n.messages.zhTW, ...{ "text": "文本", "badge": "徽章", "tag": "標籤", "button": "按鈕", "status": "狀態", "progress": "進度條", "image": "圖片", "json": "JSON數據", "html": "HTML內容", "date": "日期", "color": "顏色", "url": "鏈接", "code": "代碼", "boolean": "布爾值", "validation_error": "驗證過程中發生錯誤", "ext_data_required": "此標籤類型需要填寫擴展數據", "progress_validation": "進度值必須是0-100的整數", "color_validation": "顏色格式不正確（支持：#RGB、#RRGGBB、rgb()、顏色名稱）", "boolean_validation": "請輸入true/false或1/0", "date_validation": "日期格式不正確（支持：時間戳或日期字符串）", "json_validation": "必須是有效的JSON格式", "image_url_validation": "請輸入有效的圖片URL", "link_url_validation": "請輸入有效的鏈接地址", "format_error": "格式錯誤", "category": "所属分类", "property_value": "属性值", "dictionary_value": "字典值", "is_default": "是否默认", "Display Text": "顯示文本", "Tag Type": "標籤類型", "Style (Style)": "樣式(Style)", "Style (Class)": "樣式(Class)", "Extended Data": "擴展數據" } };
    </script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/index.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/zhCN.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/en.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/fr.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/ja.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/vi.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/zhTW.js"></script>
    <script>Vue.prototype.$baseURL = "@config?.PrefixRoute";</script>
    <script src="~/ruoveaui/xg6rvft8p/vue/axios.min.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/vue/vue-i18n.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/avue/avue.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/avue/avue.min.option.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    name: "sysDictValue",
                    pageUrl: "/dictvalue/pages",
                    addUrl: "/dictvalue/add",
                    editUrl: "/dictvalue/update",
                    deleteUrl: "/dictvalue/delete",
                    TypeId: `@ViewBag.typeId`,
                    pageOption: {
                        total: 0,
                        page: 1,
                        pageSize: 10
                    },
                    currentForm: {},
                    loading: true,
                    btnLoading: false,
                    tableData: [],
                    searchParams: {},

                    option: {
                        searchShowBtn: false,
                        refreshBtn: false,
                        columnBtn: false,
                        addBtn: @(string.IsNullOrWhiteSpace(ViewBag.addBtn) ? "false" : "true"),
                        editBtn: @(string.IsNullOrWhiteSpace(ViewBag.editBtn) ? "false" : "true"),
                        delBtn: @(string.IsNullOrWhiteSpace(ViewBag.delBtn) ? "false" : "true"),
                        viewBtn: true,
                        rowKey: 'id',
                        searchShow: false,
                        dialogWidth: "50%",
                        column: [
                            { prop: "id", label: `${this.i18n.t('primary_key')}`, search: false, hide: true, type: "number", display: false, showColumn: false, },
                            { prop: "typeId", search: false, hide: true, type: "number", display: false, showColumn: false, value: `@ViewBag.typeId` },

                            {
                                prop: "tagType", label: `${this.i18n.t('Tag Type')}`, search: true, display: false, hide: true, value: `image`, type: "input", width: '80',
                                rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` },]
                            },
                            { prop: "code", label: `${this.i18n.t('code')}`, search: true, hide: false, editDisplay: true, type: "input", clearable: true, rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }], },
                            { prop: "label", label: `${this.i18n.t('Display Text')}`, search: true, hide: false, type: "input", clearable: true, rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }], },
                            {
                                prop: "value", label: `${this.i18n.t('property_value')}`, search: true, hide: false, type: "input", clearable: true, rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}`}]
                            },

                            { prop: "styleSetting", label: `${this.i18n.t('Style (Style)')}`, search: false, hide: true, display: false, type: "textarea", rows: 1, minRows: 1, placeholder: "color: red; font-size: 14px", },
                            { prop: "classSetting", label: `${this.i18n.t('Style (Class)')}`, search: false, hide: true, display: false, type: "textarea", rows: 1, minRows: 1, placeholder: "el-tag el-tag--success", },

                            { prop: "sort", label: `${this.i18n.t('sort')}`, search: false, hide: false, type: "number", width: '80', step: 100, value: 100, clearable: true },
                            { prop: "isDisable", label: `${this.i18n.t('status')}`, search: false, hide: false, value: 0, type: "radio", dicData: disableDicData, width: '80', },
                            { prop: "isDefault", label: `${this.i18n.t('is_default')}`, search: false, hide: false, value: false, type: "radio", dicData: [{ label: `${Vue.prototype.i18n.t('no')}`, value: false, }, { label: `${Vue.prototype.i18n.t('yes')}`, value: true, }], width: '80', },

                            {
                                prop: "extData", label: `${this.i18n.t('image')}`, hide: false, showColumn: false, span: 24, rows: 4,
                                rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }],

                                type: 'upload',
                                dataType: 'string',
                                propsHttp: { res: 'data', name: 'file', headers: { 'request-from': 'web-app' }, home: '@ViewBag.previewUrl', url: 'filePath' },
                                fileType: "img",
                                listType: 'picture-img',
                                action: '@ViewBag.uploadUrl',
                                accept: 'image/*',
                                limit: 1,
                                fileSize: 5000,
                                rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('image_url_validation')}` },],
                            },
                            { prop: "remark", label: `${this.i18n.t('note')}`, type: 'textarea', hide: true, showColumn: false, span: 24, rows: 2, },
                            { prop: "record", label: `${this.i18n.t('modification_record')}`, slot: true, display: false, showColumn: false, width: 100, },
                        ]
                    },
                    specialTypes: ['image', 'url', 'html', 'json']
                }
            },
            created() {
            },
            methods: {
                cellStyle({ row, column, rowIndex, columnIndex }) {
                    if (column.property === 'isDisable') {
                        return row.isDisable == 0 ? { color: '#67c23a' } : { color: '#f56c6c' };
                    }
                    if (column.property === 'isDefault') {
                        return row.isDefault ? { color: '#67c23a', fontWeight: 'bold' } : { color: '#909399' };
                    }
                    if (column.property === 'tagType') {
                        return this.getTagTypeColor(row.tagType);
                    }
                },
                getTagTypeColor(tagType) {
                    const colorMap = { 'text': '#909399', 'badge': '#e6a23c', 'tag': '#409eff', 'button': '#67c23a', 'status': '#f56c6c', 'progress': '#ffc107', 'image': '#9c27b0', 'json': '#673ab7', 'html': '#f44336', 'date': '#2196f3', 'color': '#ff5722', 'url': '#00bcd4', 'code': '#607d8b', 'boolean': '#4caf50' };
                    return { color: colorMap[tagType] || '#909399' };
                },
                hasPermission(key) {
                    if (key === 'columnBtn' || key === 'menu' || key === 'refreshBtn') return true;
                    else return Permissions.avePermission(`${this.name}:${key}`);
                },
                getFormatErrorMessage(tagType) {
                    const messages = {
                        'progress': this.i18n.t('progress_validation'),
                        'color': this.i18n.t('color_validation'),
                        'boolean': this.i18n.t('boolean_validation'),
                        'date': this.i18n.t('date_validation'),
                    };
                    return messages[tagType] || this.i18n.t('format_error');
                },

                onLoad(page, done) {
                    var data = { ...page, ...this.searchParams, ...{ TypeId: this.TypeId } };
                    this.$http.post(`${this.pageUrl}`, data).then((res) => {
                        this.tableData = res.rows;
                        this.pageOption.total = res.totalRows;
                        this.loading = false;
                        if (done) { done(); }
                    }).catch(e => {
                        this.loading = false;
                        console.log(e);
                    });
                },
                searchChange(params, done) {
                    this.searchParams = params;
                    this.pageOption.page = 1;
                    this.onLoad(this.pageOption, done);
                },
                resetChange(item) {
                    this.searchParams = item;
                    this.pageOption.page = 1;
                    this.onLoad(this.pageOption);
                },
                refreshChange() { this.onLoad(this.pageOption); },
                handleRowSave(form, done, loading) {
                    form.typeId = this.TypeId;
                    this.$http.post(`${this.addUrl}`, form).then((res) => {
                        loading();
                        if (res == true) {
                            this.$message({ message: `${this.i18n.t('submit_success')}`, center: true, type: 'success' });
                            done(form);
                            this.pageOption.page = 1;
                            this.onLoad(this.pageOption);
                        }
                    }).catch(e => {
                        loading();
                    });
                },
                handleRowUpdate(row, index, done, loading) {
                    this.$http.post(`${this.editUrl}`, row).then((res) => {
                        loading();
                        if (res == true) {
                            this.$message({ message: `${this.i18n.t('submit_success')}`, center: true, type: 'success' });
                            done(row);
                        }
                    }).catch(e => {
                        loading();
                    });
                },
                handleRowDel(form, index, done) {
                    this.$confirm(this.i18n.t('confirmdelete'), this.i18n.t('tips'), { confirmButtonText: this.i18n.t('determine'), cancelButtonText: this.i18n.t('cancel'), type: 'warning', customClass: "elmessagebox" }).then(() => {
                        let data = { id: form.id };
                        this.$http.delete(`${this.deleteUrl}`, { data, headers: { 'Content-Type': 'application/json' } }).then((res) => {
                            if (res == true) {
                                this.$message({ message: `${this.i18n.t('submit_success')}`, center: true, type: 'success' });
                                done(form)
                            }
                        });
                    }).catch(_ => { loading(); console.info(_); })
                },

            }
        });
    </script>
</body>
</html>